<template>
    <div class="product-list">
        <h1>{{ $route.params }}</h1>
        <el-row :gutter="20">
            <el-col
                :xs="12"
                :sm="12"
                :md="8"
                :lg="6"
                :xl="4"
                v-for="good in goodList"
                :key="good.index"
            >
                <div class="grid-content bg-purple p-item" @click="mobileToBuyCard(good.gId)">
                    <div class="product-img">
                        <img :src="good.gImgUrl" width="100%" height="100%">
                    </div>
                    <div class="product-name">{{ good.gName }}</div>
                    <div class="product-stock">库存: {{ good.gStock }}</div>
                    <div class="product-btn">
                        <el-button round size="small" @click="toBuyCard(good.gId)">立即购卡</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "goodList",
    data() {
        return {
            goodList: [
                {
                    gId: 1,
                    gName: "CF点卡1",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 132
                },
                {
                    gId: 2,
                    gName: "CF点卡2",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 2132
                },
                {
                    gId: 3,
                    gName: "CF点2卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 1332
                },
                {
                    gId: 4,
                    gName: "CF点卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 1432
                },
                {
                    gId: 5,
                    gName: "CF点2卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 132
                },
                {
                    gId: 6,
                    gName: "CF点2卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 132
                },
                {
                    gId: 7,
                    gName: "CF点2卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 132
                },
                {
                    gId: 8,
                    gName: "CF点2卡",
                    gImgUrl: "http://localhost:8080/static/images/tt.jpg",
                    gStock: 132
                }
            ]
        };
    },
    methods: {
        mobileToBuyCard(id) {
            let winWidth = window.innerWidth;
            if (winWidth <= 768) {
                this.$router.push({
                    path: '/goodList/' + id + '/goodDetail'
                });
            } else {
                return false;
            }
        },
        toBuyCard(id) {
            this.$router.push({
                path: '/goodList/' + id + '/goodDetail'
            });
        },
    }
};
</script>

<style scoped>
.el-col {
    border-radius: 4px;
}
.bg-purple {
    background: #ffffff;
}
.grid-content {
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 36px;
}
</style>